<template>
  <view class="search-container">
    <view class="search-box">
      <!-- 使用 uni-ui 提供的搜索组件 -->
        <uni-search-bar
          @input="input"
          :radius="100"
          cancelButton="none"
          @clear="goodList = []"
        ></uni-search-bar>
    </view>
    <!-- 搜索结果 -->
    <view class="sugg-list" v-if="goodList.length>0">
      <view class="sugg-item" v-for="item in goodList" :key="item.goods_id" @click="goToDetail(item.goods_id)">
        <text>{{item.goods_name}}</text>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history-box" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons  type="trash" @click='clearHistory'></uni-icons>
      </view>
      <view class="history-list">
        
        <uni-tag @click="goTogoodList(item)"  v-for="item in history" :key="item" :text="item" />
        
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timer:'',
      goodList:[], // 商品列表数据
      history:[] //搜索历史
    }
  },
  onLoad(){
    this.history=uni.getStorageSync('history') || []
  },
  methods:{
   input(e){
    clearTimeout(this.timer)
    this.timer=setTimeout(() => {
      this.searchHandler(e)
      // console.log(e)
    }, 500);
    
  },
  async searchHandler(keyword){
     if (keyword.trim().length === 0) return
   const res=await uni.$request({
     url:'goods/qsearch',
     data:{
       query:keyword
     }
   })
  //  console.log(res)
   if(res.meta.status===200){
    this.goodList=res.message
   }
   
  //  如果历史记录已经有了，则删除，加到最前面
   const index=this.history.findIndex(v=>{
     return v===keyword
   })
   if(index>-1){
     this.history.splice(index,1)
   }
   this.history.unshift(keyword)
   this.saveHistory()
  },
  saveHistory(){
    // 保存本地历史记录
     uni.setStorageSync('history', this.history)
  },
  // 清空历史记录
  clearHistory(){
    this.history=[]
    uni.setStorageSync('history', [])
  },
  goToDetail(id){
    uni.navigateTo({ url: '/subpkg/goodDetail/index?id='+id })
  },
  // 根据搜索的字去商品列表
  goTogoodList(item){
    uni.navigateTo({ url: '/subpkg/goodList/index?query='+item })
  }
}
}
</script>

<style lang="scss" scoped>
.search-container {
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
    ::v-deep .uni-searchbar {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      position: relative;
      padding: 16rpx;
      /* 将默认的 #FFFFFF 改为 #C00000 */
      background-color: #c00000;
    }

  }
   .history-box {
      padding: 0 5px;


      .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
      }


      .history-list {
        display: flex;
        flex-wrap: wrap;


        ::v-deep .uni-tag {
          margin-top: 5px;
          margin-right: 5px;
        }
      }
    }

    .sugg-list {
      padding: 0 5px;

      .sugg-item {
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .goods-name {
          // 文字不允许换行（单行文本）
          white-space: nowrap;
          // 溢出部分隐藏
          overflow: hidden;
          // 文本溢出后，使用 ... 代替
          text-overflow: ellipsis;
          margin-right: 3px;
        }
      }
    }
}
</style>